<template>
  <KtwlProcessDesign
    @setDialog="setDialog"
    v-model="processForm"
    :isDetail="isDetail"
  >
    <el-dialog
      style="text-align: left"
      v-model="dialogVisible"
      title="设置"
      width="500"
    >
      <el-form :model="form" label-width="100">
        <el-row>
          <el-col :span="14">
            <el-form-item label="机构类型" prop="orgType">
              <el-select v-model="form.orgType" placeholder="请选择机构类型">
                <el-option
                  v-for="(item, index) in []"
                  :key="index"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="14">
            <el-form-item label="节点类型" prop="nodeType">
              <el-select v-model="form.nodeType" placeholder="请选择节点类型">
                <el-option
                  v-for="(item, index) in []"
                  :key="index"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="" prop="nodeContent" label-width="0">
              <el-input v-model="form.nodeContent" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="14">
            <el-form-item label="是否会签" prop="isCountersign">
              <el-radio-group v-model="form.isCountersign">
                <el-radio :value="true">是</el-radio>
                <el-radio :value="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="form.isCountersign">
          <el-col :span="14">
            <el-form-item label="会签类型" prop="countersignType">
              <el-select
                v-model="form.countersignType"
                placeholder="请选择会签类型"
              >
                <el-option
                  v-for="(item, index) in []"
                  :key="index"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="form.isCountersign">
          <el-col :span="14">
            <el-form-item label="会签完成条件" prop="countersignCondition">
              <el-input
                v-model="form.countersignCondition"
                placeholder="请输入完成比"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="14">
            <el-form-item label="审批角色" prop="auditRole">
              <el-select v-model="form.auditRole" placeholder="请选择审批角色">
                <el-option
                  v-for="(item, index) in []"
                  :key="index"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="14">
            <el-form-item label="审批人员" prop="auditPeople">
              <el-select
                v-model="form.auditPeople"
                placeholder="请选择审批人员"
              >
                <el-option
                  v-for="(item, index) in []"
                  :key="index"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click="handleSave" type="primary">保存</el-button>
        <el-button @click="handleClose">取消</el-button>
      </template>
    </el-dialog>
  </KtwlProcessDesign>
</template>

<script setup>
import { KtwlProcessDesign } from '/@/index';
import { ref } from 'vue';
const dialogVisible = ref(false);
const processForm = ref({
  processList: [
    {
      nodeOrder: 1,
      nodeType: 2,
      groupOrder: 1,
      nodeName: '节点名称1',
      nodeAlias: '节点别名',
      nodeNameCode: 'jiedianbianma',
      extend: { // 设置弹窗内容(以下为demo字段，可自定义)
        orgType: 'orgType',
        nodeType: 'nodeType',
        nodeContent: 'nodeContent',
        isCountersign: false,
        countersignType: 'countersignType',
        countersignCondition: 'countersignCondition',
        auditRole: 'auditRole',
        auditPeople: 'auditPeople',
      }
    },
    {
      nodeOrder: 2,
      nodeType: 1,
      groupOrder: null,
      nodeName: '节点名称2',
      nodeAlias: '节点别名2',
      nodeNameCode: 'jiedianbianma2',
      extend: {
        orgType: 'orgType2',
        nodeType: 'nodeType2',
        nodeContent: 'nodeContent2',
        isCountersign: false,
        countersignType: 'countersignType2',
        countersignCondition: 'countersignCondition2',
        auditRole: 'auditRole2',
        auditPeople: 'auditPeople2',
      }
    }
  ],
});
const setIndex = ref(null);
const isDetail = ref(false);
const form = ref({
  orgType: '',
  nodeType: '',
  nodeContent: '',
  isCountersign: false,
  countersignType: '',
  countersignCondition: '',
  auditRole: '',
  auditPeople: '',
});
const setDialog = obj => {
  let { flag, processIndex, processItem } = obj;
  dialogVisible.value = flag;
  setIndex.value = processIndex;
  // 设置弹窗内容回显
  form.value = JSON.parse(JSON.stringify(processItem.extend));
};
const handleSave = () => {
  // 设置弹窗内容保存
  if (setIndex.value || setIndex.value === 0) {
    processForm.value.processList[setIndex.value].extend = JSON.parse(JSON.stringify(form.value));
  }
  handleClose();
};
const handleClose = () => {
  setDialog({
    flag: false,
    processIndex: null,
    processItem: {
      extend: {
        orgType: '',
        nodeType: '',
        nodeContent: '',
        isCountersign: false,
        countersignType: '',
        countersignCondition: '',
        auditRole: '',
        auditPeople: ''
      }
    }
  });
};

</script>

<style lang="scss" scoped></style>